<template>
	<el-form ref="form" :model="form" label-width="80px" size="small" v-loading.fullscreen.lock="fullscreenLoading">
		<el-form-item label="角色">
			<!-- <el-input v-model="form.roleCode" disabled=""></el-input> -->
            <el-tag>{{roleName}}</el-tag>
		</el-form-item>
		<el-form-item label="用户名">
			<el-input v-model="form.userName" disabled=""></el-input>
		</el-form-item>
		<el-form-item label="密码">
			<el-input v-model="form.password" show-password></el-input>
		</el-form-item>
		<el-form-item label="确认密码">
			<el-input v-model="form.repassword" show-password></el-input>
		</el-form-item>
		<el-form-item label="姓名">
			<el-input v-model="form.name"></el-input>
		</el-form-item>
		<el-form-item label="手机号">
			<el-input v-model="form.phone" disabled=""></el-input>
		</el-form-item>
		<el-form-item label="有效期">
			<el-date-picker type="daterange" placeholder="选择日期" v-model="form.expireTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
			<!-- <el-col :span="11">
				<el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;">
				</el-date-picker>
			</el-col>
			<el-col class="line" :span="2" style="text-align:center;">-</el-col>
			<el-col :span="11">
				<el-date-picker placeholder="选择时间" v-model="form.endTime" style="width: 100%;"></el-date-picker>
			</el-col> -->
		</el-form-item>
		<el-form-item label="备注">
			<el-input type="textarea" v-model="form.bz"></el-input>
		</el-form-item>

        <el-form-item>
			<el-button size="small" @click="cancel">取 消</el-button>
			<el-button type="primary" size="small" @click="confirm">确 定</el-button>
		</el-form-item>

	</el-form>
</template>

<script>
    import {
		mapState,
		mapMutations
	} from 'vuex';
    import RoleMixin from './../../../mixins/role.mixin';
    
	export default {
        name: 'UserEditDialog',
        props: {
            data: Object
        },
        mixins: [RoleMixin],
		data() {
			return {
				form: {
                    roleCode: '',
					userName: '',
                    password: '',
                    repassword: '',
                    name: '',
                    phone: '',
					expireTime: null,
					startTime: '',
					endTime: '',
					bz: ''
                },
                fullscreenLoading: false
			}
        },
        computed: {
			...mapState({
				roleList: 'roleList'
            }),
            roleName(){
                let role = this.roleList.find(item=>item.roleCode === this.form.roleCode);
                if( role ) return role.roleName;
                return '';
            }
		},
        created() {
            Object.keys(this.form).forEach(key=>this.form[ key ] = this.data[ key ]);
            this.form.password = '';
			this.form.expireTime = [this.data.startTime, this.data.endTime];
            if (this.roleList.length === 0) {
				this.getRoleRemote().then(response => {
					this.saveRoleList(response);
				});
            }
        },
        methods: {
            ...mapMutations({
				saveRoleList: 'commitRoleList'
            }),
            cancel() {
                this.$emit('userEditEvent', false);
            },
            confirm() {
                let form = this.form;
                if( form.repassword !== form.password ) return this.$message({ type: 'warning', message: '两次填写的密码不一致!'});
                
                let url = this.$svHttp.Api.uEdit;
                this.fullscreenLoading = true;
                this.$svHttp.httpPost(url, {
                    userNo: this.data.userNo,
                    ...this.form,
					startTime: this.form.expireTime[0],
					endTime: this.form.expireTime[1]
                }).then(response=>{
                    this.fullscreenLoading = false;
                    if( response ) {
                       this.$emit('userEditEvent', this.form);
                    }
                });
            }
        }
	}

</script>

<style lang="scss" scoped>
	.el-form-item {
		margin-bottom: 10px;
	}

</style>
